
<nav class="navbar navbar-default subnav ">

    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">爬虫管理</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                <a href="#/flowcrawl">FlowCrawl爬虫配置</a>
                </li>
                <li>
                <a class="active" href="#/detail">爬虫插件详情</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<a id="update-info-btn" href="" ng-click="update_plugin_info()" style="margin-top: 100px;">
    <span class="glyphicon glyphicon-refresh update-icon" style="left:200px; background-color: #FFCC99; padding: 20px; font-size: 22px; color: #FFF;">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </span>
</a>

<div class="container">
    <span class="bs-callout bs-callout-info">选择插件包 </span>
    <a class="button button-small button-raised button-capitalize {{disable_map[pinfo.name]}}" href="#/detail/{{pinfo.name}}" ng-repeat="pinfo in all_plugin_info" >{{pinfo.name}}</a>

    <div class="col-md-12 node-pannel" sytle="margin-top:20px;">
        <div class="col-md-12"><hr/></div>
        <div class="col-md-12">
            <div class="col-md-6 bs-callout bs-callout-warning">
                    <h2>{{plugin_info.name}} --- {{plugin_info.fileName}}</h2>
                    <a class="button button-small button-raised button-capitalize" id="delete-plugin-package" ng-click="plugin_delete()">删除插件包</a>
            </div>
        </div>
        <div class="col-md-12"><hr/></div>
         
        <div class="col-md-12">

            <div class="col-md-12" ng-repeat="plugin in plugin_info.plugins">
                <div id="info_{{plugin.qualified}}" style="padding-top: 20px;" ng-show="{{plugin.processable}}">

                    <div class="col-md-12" style="padding-top:20px; padding-bottom:20px; background-color:#0099cc; color:#FFF;">
                        <span class="bs-callout bs-callout-info" style="font-size:20px;">{{plugin.desc}}</span>
                        <span class="badge" ng-show="{{plugin.isLaunched}}">定时触发已启动</span>
                        <span class="badge" ng-show="{{plugin.isProcessing}}">正在爬取</span>
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" ng-click="show_panel_plugin_process(plugin.qualified)" style="float:right;" ng-show="{{plugin.processable}}">抓取历史</a>
                        <div class="col-md-12" style="padding-top: 20px;">
                            <div ng-show="{{plugin.isProcessing}}" style="padding-top: 10px; padding-bottom:10px;">
                                <td>总链接数</td> <td>{{plugin.reference}}</td>
                                <td>正在爬取链接数</td> <td>{{plugin.runningReference}}</td>
                            </div>

                            <div id="ctrl_panel">
                                <span>控制 : </span>
                                <a class="button button-rounded button-plain button-small button-border cannot_select" ng-click="plugin_start_now(plugin.qualified)" ng-show="{{!plugin.isLaunched && !plugin.isProcessing}}">现在开始</a>
                                <a class="button button-rounded button-plain button-small button-border cannot_select" ng-click="plugin_start_at(plugin.qualified)" ng-show="{{!plugin.isLaunched && !plugin.isProcessing}}">定时开始</a>
                                <a class="button button-rounded button-plain button-small button-border cannot_select" ng-click="plugin_start_incremental(plugin.qualified)" ng-show="{{!plugin.isLaunched && !plugin.isProcessing}}">增量爬取</a>
                                <a class="button button-rounded button-plain button-small button-border cannot_select" ng-click="plugin_start_cron(plugin.qualified)" ng-show="{{!plugin.isLaunched && !plugin.isProcessing}}">设置Cron定时器</a>
                                <a class="button button-rounded button-plain button-small button-border cannot_select" ng-click="plugin_stop(plugin.qualified)" ng-show="{{plugin.isProcessing}}">停止本次爬取</a>
                                <a class="button button-rounded button-plain button-small button-border cannot_select" ng-click="plugin_close(plugin.qualified)" ng-show="{{plugin.isLaunched}}">关闭定时器</a>
                            </div>
                        </div>
                    </div>

                    <table class="table table-hover" style="background-color:#eee;">
                        <tbody>
                        <tr>
                            <td>插件解析类</td> <td>{{plugin.qualified}}</td>
                        </tr>
                        <tr>
                            <td>线程数</td> <td>{{plugin.threadCount}}</td>
                        </tr>
                        <tr>
                            <td>调度时间间隔</td> <td>{{plugin.scheduleInterval}} 毫秒</td>
                        </tr>
                        <tr ng-show="{{plugin.isLaunched}}">
                            <td>触发开始配置</td> <td>{{plugin.triggerType}} | {{plugin.triggerCron}}{{plugin.triggerTime}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="process_{{plugin.qualified}}" style="display:none;">
                    <div class="col-md-12" style="padding-top:20px; padding-bottom:20px; background-color:#0099cc; color:#FFF;">
                        <span class="bs-callout bs-callout-info" style="font-size:20px;">插件解析类 : {{plugin.qualified}}</span>
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" ng-click="show_panel_plugin_info(plugin.qualified)" style="float:right;" ng-show="{{plugin.processable}}">插件信息</a>
                        <div style="padding-top:15px;">
                            <h4>抓取历史<span> (Last 10)</span></h4>
                        </div>
                    </div>

                    <table class="table table-hover col-md-12" style="table-layout: fixed; background-color:#eee;">
                        <thead>
                        <tr>
                            <td>Task ID</td>
                            <td>开始时间</td>
                            <td>结束时间</td>
                            <td>总爬取链接数</td>
                            <td>停止方式</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="his in plugin.historyTask">
                            <td><div style="overflow: auto; white-space: nowrap; text-overflow: ellipsis; width:150px;">{{his.taskID}}</div></td>
                            <td>{{his.startDate}}</td>
                            <td>{{his.stopDate}}</td>
                            <td>{{his.totalRef}}</td>
                            <td>{{his.stopStatus}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="stopModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">请确认</h4>
            </div>
            <div class="modal-body">
                <h4 style="color:red;">您确定停止？</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-primary button-small button-raised button-capitalize" data-dismiss="modal" ng-click="plugin_stop()">停止</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="closeModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">请确认</h4>
            </div>
            <div class="modal-body">
                <h4 style="color:red;">您确定关闭？</h4>
                <p>关闭将会停止当前已经开始的任务!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-primary button-small button-raised button-capitalize" data-dismiss="modal" ng-click="plugin_close()">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="startAtModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">设置开始时间</h4>
            </div>
            <div class="modal-body">
                开始时间 : <input size="16" class="form_datetime" type="text" value="" readonly ng-model="startat_time">
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-primary button-small button-raised button-capitalize" data-dismiss="modal" ng-click="plugin_start_at()">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="startIncrementalModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">设置增量</h4>
            </div>
            <div class="modal-body">
                增量爬取间隔时间 : <input size="16" type="text" ng-model="startIncrementalInterval">
                <select ng-model="startIncrementalUnit" ng-options="s.type as s.type for s in dateUnitTypes"></select>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-primary button-small button-raised button-capitalize" data-dismiss="modal" ng-click="plugin_start_incremental()">开始</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="cronModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">Cron Setting</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2">Seconds</label>
                        <div class="col-md-10">
                            <input type="text" size="2" class="form-control" ng-model="cron_config.seconds">
                        </div>
                        <label class="col-md-2">Minutes</label>
                        <div class="col-md-10">
                            <input type="text" size="2" class="form-control" ng-model="cron_config.minutes">
                        </div>
                        <label class="col-md-2">Hours</label>
                        <div class="col-md-10">
                            <input type="text" size="2" class="form-control" ng-model="cron_config.hours">
                        </div>
                        <label class="col-md-2">DayOfMonth</label>
                        <div class="col-md-10">
                            <input type="text" size="2" class="form-control" ng-model="cron_config.dayOfMonth">
                        </div>
                        <label class="col-md-2">Month</label>
                        <div class="col-md-10">
                            <input type="text" size="2" class="form-control" ng-model="cron_config.month">
                        </div>
                        <label class="col-md-2">DayOfWeek</label>
                        <div class="col-md-10">
                            <input type="text" size="2" class="form-control" ng-model="cron_config.dayOfWeek">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-primary button-small button-raised button-capitalize" data-dismiss="modal" ng-click="plugin_start_cron()">确定</button>
            </div>
        </div>
    </div>
</div>
